<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <!-- <script src="https://blog.farmer233.top/cdn/vue.min.js"></script> -->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>

<body>

    <div id="app">
        <div id="title">
            <h1 @click="renew()">{{ title }}</h1>
        </div>
        <div id="artical-msg">
            <h2>Auther: {{ auther }} | Date: {{date}}</h3>
        </div>
        <div id="text">
            <div class="text" v-for="(text, index) in text_list">
                <p :id="'en-' + index" @click="showTranslate(index)">{{ text.zh }}</p>
                <p :id="'zh-cn-' + index" v-show="false">{{ text.cn }}</p>
            </div>
            <p style="text-align: center; margin: 10px auto;">The end!</p>
            <p style="text-align: center; margin: 0 auto;">非常amazing啊！你居然读到了最后！</p>
        </div>
        
        <div id="translate-letter">
            <p v-for="(value, index) in resTranslation"><span>translation-></span>{{value}}</p>
            <p v-for="(value, key) in resWeb"><span>{{value.key}}-></span>{{value.value}}</p>
            <input type="text" v-model="translateLetter" @keyup.enter="getTransLetter()" placeholder="按下回车搜索">
        </div>
    </div>

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                // http://127.0.0.1:5000
                api_host: "",
                numArtical: 0,
                title: "",
                auther: "",
                date: "",
                text_list: [],
                zhShow: false,
                translateLetter: "",
                resTranslation: "",
                resWeb: ""
            },
            mounted() {
                axios
                    .get(this.api_host + "/api/getNews")
                    .then(resp => {
                        this.addArtical(resp.data)
                    })
                    .cathch(e => {
                        console.log(e)
                    })
            },
            methods: {
                renew: function () {
                    axios
                        .get(this.api_host + "/api/getNews")
                        .then(resp => {
                            if (this.numArtical < resp.data.length) {
                                this.numArtical++
                            } else {
                                this.numArtical = 0;
                            }
                            console.log(this.numArtical)
                            this.addArtical(resp.data)

                        })
                        .cathch(e => {
                            console.log(e)
                        })
                },
                getTransLetter: function(){
                    console.log(this.translateLetter)
                    console.log(this.translateLetter.length)
                    console.log(typeof this.translateLetter)
                    axios.post(this.api_host + "/api/letter",{
                        "letter": this.translateLetter
                    }).then(res=>{
                        if (res.data.status > 0) {
                            this.resTranslation = res.data.data.translation
                            this.resWeb = res.data.data.web
                        }
                    }).cathch(e=>{
                        console.log(e)
                    })
                },
                addArtical: function (data) {
                    this.title = data[this.numArtical].title
                    this.auther = data[this.numArtical].auther
                    this.date = data[this.numArtical].date
                    this.text_list = data[this.numArtical].text
                },
                showTranslate: function (index) {
                    index = 'zh-cn-' + index
                    dom = document.querySelector("#"+index)
                    if (dom.style.display == "none") {
                        dom.style.display = ""
                    }else{
                        dom.style.display = "none"
                    }
                }
            }
        })
    </script>
</body>

</html>